<template>
	<view class="withdraw-list">
		<!-- 		<view class="search-title">
			<text>共{{ total }}条</text>
			<view class="screen" @click="">
				<text>筛选</text>
				<u-icon name="arrow-down-fill" color="#AAAAAA" size="20" class="icon"></u-icon>
			</view>
		</view> -->
		<view class="list-contain">
			<view class="list-contain-item" v-for="(item, index) in list" :key="secondKey('A',index)" @click="toDetail(item)">
				<view class="date">
					<view class="data flex-column">
						<view class="tag-box flex-space-between">
							<text class="title">{{ item.merchName }}</text>

							<span class="status" :style="{color: getColor(item.status)}" >{{ item.status | changeServiceType }}</span>
						</view>
						<view class="content-box flex-space-between">
							<text class="left">商户号：{{ item.merchNo }}</text>
							<i  class="iconfont icon-niantie right-icon" @click.stop="$copy(item.merchNo)"></i>
						</view>
						<view class="content-box flex-space-between">
							<text class="left">费率名：{{ item.rateName }}</text>

						</view>
						<view class="content-box flex-space-between">
							<text class="left">机具号:{{ item.serialno }}</text>
						</view>
						
						<view class="content-box flex-space-between">
							<text class="left">政策：{{ item.policyName }}</text>
						</view>
						<view class="content-box flex-space-between">
							<span class="left">费率类型：{{ item.rateType | rateType }}</span>
						</view>
					</view>
					<view class="t-box flex-space-between">
						<span class="time">{{ item.addDate | timeForm }}</span>
					</view>
					<view class="error" v-if="item.status == 3">失败原因:{{ item.message }}</view>
				</view>
			</view>
		</view>

		<u-popup v-model="isScreen" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="商户编号：" v-model="queryParams.merchNo" :label-width="170" input-align="left"
						placeholder="请输入商户编号" >
					</u-field>
					<u-field label="状态：" :disabled="true" v-model="queryParams.statusName" :label-width="170" input-align="left"
						placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showStatusPicker = true"></text>
					</u-field>
					<u-field :disabled="true" label="产品政策：" :value="queryParams.policyName" input-align="left" :label-width="170"
						placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>

					<view class="duble-input flex-space-between">
						<text class="text">申请日期</text>
						<u-field label="" v-model="queryParams.startDate" :disabled="true" :label-width="0" :border-bottom="false"
							input-align="center" placeholder="请选择" @click="chooseTime('start')"></u-field>
						-
						<u-field :disabled="true" label="" :value="queryParams.endDate" :border-bottom="false" input-align="center"
							:label-width="0" placeholder="请选择" @click="chooseTime('end')" />
					</view>
					<view class="duble-input flex-space-between">
						<text class="text">终端连号</text>
						<u-field label="" v-model="queryParams.serialnoStart" :label-width="0" :border-bottom="false"
							input-align="center" placeholder="请输入起始SN号"></u-field>
						-
						<u-field label="" v-model="queryParams.serialnoEnd" :border-bottom="false" input-align="center"
							:label-width="0" placeholder="请输入终止SN号" />
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn" @click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button></div>
				</div>
			</div>
		</u-popup>
		<u-picker title="申请状态" v-model="showStatusPicker" mode="selector" :range="changeServiceType" range-key="text"
			confirm-color="#4888FB" @confirm="onStatusConfirm" @cancel="showStatusPicker = false" />
		<u-picker title="政策筛选" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onPolicyConfirm" @cancel="showPicker = false" />
		<u-picker mode="time" v-model="timePicker" :default-time="defaultTime" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
		<uni-load-more :status="loadMore"></uni-load-more>
	</view>
</template>

<script>
	import {
		changeRateHistory
	} from '_a/merchRateChange';
	import loadMoreData from '@/mixins/loadmore';
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentYearFirst,
		getFormDate
	} from '_c/utils/date';
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				isScreen: false,
				queryParams: {
					startDate: '',
					endDate: '',
					pageNum: 1,
					pageSize: 20
				},
				loadMore: 1,
				list: [],
				showPicker: false,
				timePicker: false,
				showStatusPicker: false,
				total: '',
				chooseType: 'start', //选择时间类型
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				defaultTime: '',
				changeServiceType: [{
					text: '申请中',
					value: '0'
				}, {
					text: '处理中',
					value: '1'
				}, {
					text: '修改完成',
					value: '2'
				}, {
					text: '修改失败',
					value: '3'
				}]
			};
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			}
		},
		onLoad() {
			this.getList();
		},
		filters: {
			timeForm(v) {
				// .slice(0, 10)
				return v;
			}
		},
		methods: {
			toDetail(item) {
				this.$storage.setStore('changeRateDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/policy/changeRateInfo'
				});
			},
			onNavigationBarButtonTap(e) {
				this.isScreen = true;
			},
			getColor(status) {
				let str;
				switch (Number(status)) {
					case 0:
						str = 'gray';
						break;
					case 1:
						str = 'gray';
						break;
					case 2:
						str = 'green';
						break;
					case 3:
						str = 'red';
						break;
					default:
						break;
				}
				return str;
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams
				};
				changeRateHistory(params).then(response => {
					let list = response.rows;
					this.total = response.total;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});
			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
				});
			},
			chooseTime(type) {
				this.timePicker = true;
				this.chooseType = type;
				if (type == 'start') {
					this.defaultTime = this.queryParams.startDate;
				} else {
					this.defaultTime = this.queryParams.entDate;
				}
			},
			onPolicyConfirm(e) {
				this.queryParams.policyCode = this.policyList[e[0]].policyCode;
				this.queryParams.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			onStatusConfirm(e) {
				this.queryParams.status = this.changeServiceType[e[0]].value;
				this.queryParams.statusName = this.changeServiceType[e[0]].text;
			},
			pickerConfirmHandle(item) {
				if (this.chooseType == 'start') {
					this.queryParams.startDate = `${item.year}-${item.month}-${item.day}`;
					this.queryParams.startDate = `${item.year}-${item.month}-${item.day}`;
				} else {
					this.queryParams.endDate = `${item.year}-${item.month}-${item.day}`;
				}
				this.timePicker = false;
			},
			// 重置
			resetHandle() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 20
				};
			},
			// 搜索确定
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.pageNum = 1;
				this.list = [];
				this.getList();
				this.isScreen = false;
			},
			secondKey(first, second){
			    return `${first}_${second}`  
			}, 
		}
	};
</script>

<style lang="scss">
	.withdraw-list {
		margin: R(20);
	}

	.search-title {
		display: flex;
		justify-content: space-between;
		margin: R(20) 0;
	}

	.list-contain {
		background-color: #ffff;
		border-radius: R(10);

		&-item {
			// .title {
			// 	font-size: R(28);
			// 	// font-weight: 600;
			// }

			// .text {
			// 	display: flex;
			// 	justify-content: space-between;
			// 	align-items: center;

			// 	.price {
			// 		color: #AAAAAA;
			// 	}
			// }
			.date {
				padding: R(20) R(20) R(20);
				border-bottom: 1px solid #eee;

				.t-box {
					.time {
						height: R(44);
						line-height: R(44);
						// margin-top: R(10);
						text-align: center;
						// background: #f1f6f8;
						border-radius: R(22);
						font-size: R(26);
						font-weight: 400;
						color: #9b9999;
					}
				}

				.data {
					.content-box {
						margin: R(6) 0;
						font-size: R(26);

						.left {}

						.right {}
					}

					.tag-box {
						text-align: center;
						padding: R(0) 0;

						.num {
							font-size: R(36);
							margin-bottom: R(10);
							color: red;
						}

						.title {
							font-size: R(28);
							color: #666666;
						}

						.status {
							font-size: R(26);
						}

						.gray {
							color: gray;
						}

						.red {
							color: red;
						}

						.green {
							color: green;
						}
					}
				}

				.error {
					color: #f74949;
					font-size: R(24);
				}

				.name {
					font-size: R(26);
					margin-bottom: R(20);

					.me {
						position: relative;
						color: #f3e8a1;
						font-size: R(46);

						.font {
							position: absolute;
							left: R(20);
							top: R(10);
							font-size: R(20);
							color: #000;
						}
					}
				}

				.title {
					font-size: R(30);
					font-weight: bold;
					color: #1a1a1a;
				}
			}
		}
	}

	.search-box {
		margin: R(30);

		.title {
			text-align: center;
			font-weight: 400;
			font-size: R(30);
		}

		.open-time {
			display: flex;
			justify-content: space-between;

			&-box {
				display: flex;
			}
		}

		.bottom-btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: R(30) 0;

			.btn {
				text-align: center;
				line-height: R(50);
			}
		}
	}

	.filter-body {
		padding: R(30);

		.f-title {
			font-size: R(30);
			text-align: center;
			font-weight: 400;
			color: #999;
		}
	}

	.filter-content {
		margin-bottom: R(30);

		.duble-input {
			border-bottom: 1px solid #eee;

			.text {
				width: R(140);
				white-space: nowrap;
				padding: 0 R(28);
			}
		}
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}

	.icon-xiajiantou {
		font-size: R(24);
		margin-left: R(14);
	}
	.right-icon{
		margin-right: auto;
		font-size: R(36);
	}
</style>